<template>
	<!-- 小纸条/聊天列表 -->
	<view class="chat">
		
		<!-- 聊天列表 -->
		<scroll-view class="chat-scroll" scroll-y :scroll-into-view="scrollInto" scroll-with-animation>
			<!-- 消息列表：绑定id，用于滚动到该元素 -->
			<chat-list v-for="(item, index) in list" :key="item.id" :item="item"
					   :pretime="index > 0 ? list[index-1].createTime : 0" :id="'chat' + index"></chat-list>
		</scroll-view>
		<!-- 底部操作栏 -->
		<bottom-input @submit="submit"></bottom-input>
	</view>
</template>

<script>
import { chatList } from "@/utils/data/data.js";
import ChatList from "@/pages/paper/cpns/chat-list.vue";
import { MessageApi } from "@/api/index.js";
import BottomInput from "@/components/bottom-input/bottom-input.vue";
import websocketMixin from '@/utils/mixins/websocketMixin'

	export default {
		mixins: [websocketMixin],
		components: {
			ChatList,
			BottomInput
		},
		data() {
			return {
				friendId: '', 
				username: '', // 当前用户名
				scrollHeight: 0, // 滚动区域高度
				scrollInto: '',
				list: [],
				query: {}
			};
		},
		onShow() {
			this.initData();
		},
		onLoad(options) {
		    if (options && options.username) {
		        this.username = decodeURIComponent(options.username); // 解码用户名
		    }
		
		    if (options && options.friendId) {
		        this.friendId = options.friendId; // 接收 friendId
		    }
		
		    uni.setNavigationBarTitle({
		        title: this.username
		    });
		
		    this.calculateScrollHeight();
		},
		onReady() {
			this.scrollToBottom();
		},
		methods: {
			onPrivateMessage(data){
				this.initData();
				setTimeout(() => this.scrollToBottom(), 100); // 调整延迟时间以适应动画效果
			},
			async initData(){
				this.query = {
					username: this.username,
					pageNo: 1,
					pageSize: 1000
				}
				const res = await MessageApi.listByUserName(this.query);
				if(res.code === 200){
					this.list = res.data.list;
				}
			},
			calculateScrollHeight() {
				uni.getSystemInfo({
					success: ({ windowHeight }) => {
						const inputHeight = uni.upx2px(82); // 假设底部输入栏高度为82rpx
						this.scrollHeight = windowHeight - inputHeight;
					}
				});
			},
			scrollToBottom() {
				if (this.list.length > 0) {
					this.scrollInto = 'chat' + (this.list.length - 1);
				}
			},
			async submit(data) {
				const messageDTO = {
					sendId: getApp().globalData.userId,
					receiveName: this.username,
					content: data
				};
				const res = await MessageApi.sendMessage(messageDTO);
				if(res.code === 200){
					const message = {
						id: new Date().getTime(),
						createTime: new Date().getTime(),
						content: data,
						isSelf: true
					};
					
					this.initData();
					setTimeout(() => this.scrollToBottom(), 100); // 调整延迟时间以适应动画效果
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.chat {
		position: relative;
		height: 100vh;

		.chat-scroll {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 85rpx; // 根据实际底部输入栏高度调整
			padding-bottom: env(safe-area-inset-bottom); // 适配 iPhone X 及以上机型底部安全区域
		}

		.bottom-handle {
			border-top: 2rpx solid $uni-border-color1;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 85rpx; // 底部输入栏高度
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;

			.send-btn {
				width: 80rpx;
				text-align: center;
			}
		}
	}
</style>